<template>
  <view class="box_slideLeft">
    <view class="touch_item touch_slideLeft" @touchstart="touchS" @touchmove="touchM"
      @touchend="touchE" :style="txtStyle">
      <slot />
    </view>
    <view class="touch_item del_box_touch_slideLeft" @click="delItem">
      <view class="shanchu">删除</view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      startX: '',
      delBtnWidth: 150,
      txtStyle: '',
    }
  },
  props: {
    stuId: {
      type: Object,
      default: () => {
        return {}
      },
    },
    deleteStatus: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //点击删除按钮事件
    delItem () {
      this.$emit('delItem', this.stuId)
    },
    touchS (e) {
      if (this.deleteStatus) {
        if (e.touches.length == 1) {
          //设置触摸起始点水平方向位置
          this.startX = e.touches[0].clientX
        }
      }
    },
    touchM (e) {
      if (this.deleteStatus) {
        if (e.touches.length == 1) {
          //手指移动时水平方向位置
          var moveX = e.touches[0].clientX
          //手指起始点位置与移动期间的差值
          var disX = this.startX - moveX
          if (disX == 0 || disX < 0) { //如果移动距离小于等于0，说明向右滑动，文本层位置不变
            this.txtStyle = "left:0rpx"
          } else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
            this.txtStyle = "left:-" + disX + "rpx"
            if (disX >= this.delBtnWidth) {
              //控制手指移动距离最大值为删除按钮的宽度
              this.txtStyle = "left:-" + this.delBtnWidth + "rpx"
            }
          }
        }
      }
    },
    touchE (e) {
      if (e.changedTouches.length == 1) {
        //手指移动结束后水平位置
        var endX = e.changedTouches[0].clientX
        //触摸开始与结束，手指移动的距离
        var disX = this.startX - endX
        //如果距离小于删除按钮的1/2，不显示删除按钮
        this.txtStyle = disX > this.delBtnWidth / 2 ? "left:-" + this.delBtnWidth + "rpx" : "left:0rpx"
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.box_slideLeft {
  position: relative;
  overflow: hidden;
  .touch_item {
    position: absolute;
    top: 0;
    right: 0;
    background: #ffffff;
  }
  .touch_slideLeft {
    position: relative;
    width: 100%;
    z-index: 5;
    transition: left 0.2s ease-in-out;
  }
  .del_box_touch_slideLeft {
    height: 100%;
    line-height: 100rpx;
    color: #fff;
    background: #ea5863;
    display: flex;
    align-items: center;
  }
  .shanchu {
    font-size: 40rpx;
    writing-mode: vertical-rl;
  }
}
</style>